<template>
    <div class="classlist">
        <div class="styles">
            <ul>
                <li @click="change('stylesId', i.id)" :class="stylesId == i.id ? 'active' : ''" v-for="i in styles" :key="i.id">
                    {{ i.name }}
                </li>
            </ul>
        </div>
        <div v-if="isopen" class="hidden">
            <div class="areas">
                <ul>
                    <li @click="change('areasId', i.id)" :class="areasId == i.id ? 'active' : ''" v-for="i in areas" :key="i.id">
                        {{ i.name }}
                    </li>
                </ul>
            </div>
            <div class="status">
                <ul>
                    <li @click="change('statusId', i.id)" :class="statusId == i.id ? 'active' : ''" v-for="i in status" :key="i.id">
                        {{ i.name }}
                    </li>
                </ul>
            </div>
            <div class="prices">
                <ul>
                    <li @click="change('pricesId', i.id)" :class="pricesId == i.id ? 'active' : ''" v-for="i in prices" :key="i.id">
                        {{ i.name }}
                    </li>
                </ul>
            </div>
        </div>
        <div class="orders">
            <ul>
                <li @click="change('ordersId', i.id)" :class="ordersId == i.id ? 'active' : ''" v-for="i in orders" :key="i.id">
                    {{ i.name }}
                </li>
            </ul>
            <span v-if="isopen == false" @click="isSta" class="open">展开</span>
            <span v-if="isopen == true" @click="isSta" class="off">收起</span>
        </div>

        <div class="box">
            <router-link tag="div" :to="/detailpage/ + i.season_id" class="item" v-for="i in arr" :key="i.season_id">
                <div class="img">
                    <img :src="i.vertical_cover" alt="" />
                </div>
                <div class="state">
                    <span class="name">{{ i.title }}</span>
                    <span class="bookstate">{{ i.is_finish == 1 ? "[完结]" : "" }} {{ i.is_finish == 1 ? "共" + i.last_ord + "话" : "更新至" + i.last_ord + "话" }}</span>
                </div>
            </router-link>
            <!-- <div class="item" v-for="i in arr" :key="i.season_id">
                <div class="img">
                    <img :src="i.vertical_cover" alt="" />
                </div>
                <div class="state">
                    <span class="name">{{ i.title }}</span>
                    <span class="bookstate">{{ i.is_finish == 1 ? "[完结]" : "" }} {{ i.is_finish == 1 ? "共" + i.last_ord + "话" : "更新至" + i.last_ord + "话" }}</span>
                </div>
            </div> -->
        </div>
    </div>
</template>

<script>
import { myClass } from "@/request/index.js";
import { myCartoon } from "@/request/index.js";
export default {
    data() {
        return {
            isopen: false,
            arr: [],
            areas: [],
            orders: [],
            prices: [],
            status: [],
            styles: [],
            areasId: -1,
            ordersId: 0,
            pricesId: -1,
            statusId: -1,
            stylesId: -1,
        };
    },
    methods: {
        isSta() {
            this.isopen = !this.isopen;
        },
        change(target, id) {
            // console.log(target, id);
            this[target] = id;
        },
        getClass() {
            myClass().then((data) => {
                let res = data.data;
                //城市
                this.areas = res.areas;
                this.areas.unshift({ id: -1, name: "全部" });
                //推荐 更新时间 上架时间
                this.orders = res.orders;
                //免费 付费 等就免费
                this.prices = res.prices;
                this.prices.unshift({ id: -1, name: "全部" });
                //更新状态
                this.status = res.status;
                this.status.unshift({ id: -1, name: "全部" });
                //类型
                this.styles = res.styles;
                this.styles.unshift({ id: -1, name: "全部" });
            });
        },
        getCartoon() {
            myCartoon({ style_id: this.stylesId, area_id: this.areasId, is_finish: this.statusId, order: this.ordersId, is_free: this.pricesId, page_num: 1, page_size: 24 }).then((data) => {
                this.arr = data.data;
            });
        },
    },
    created() {
        this.getClass();
        this.getCartoon();
    },
    watch: {
        areasId(x, y) {
            if (x != y) {
                this.getCartoon();
            }
        },
        ordersId(x, y) {
            if (x != y) {
                this.getCartoon();
            }
        },
        pricesId(x, y) {
            if (x != y) {
                this.getCartoon();
            }
        },
        statusId(x, y) {
            if (x != y) {
                this.getCartoon();
            }
        },
        stylesId(x, y) {
            if (x != y) {
                this.getCartoon();
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.classlist {
    margin-bottom: 3.4375rem;
    width: 100%;
    ul {
        display: flex;
        flex-wrap: wrap;
    }
    li {
        margin: 0 1.25rem 0.875rem 0;
        font-size: 0.8125rem;
        color: #6c727e;
    }
    li.active {
        color: #d64b3d;
    }
    .styles {
        border-bottom: 0.0625rem solid #cccccc;
    }
    .hidden {
        width: 100%;
        margin-top: 0.625rem;
    }
    .orders {
        margin-top: 0.625rem;
        display: flex;
        justify-content: space-between;
        .open {
            font-size: 0.8125rem;
            color: #6c727e;
            position: relative;
        }
        .open::before {
            display: inline-block;
            position: absolute;
            content: "^";
            top: -0.0625rem;
            left: -0.75rem;
            transform: rotate(180deg);
        }
        .off {
            font-size: 0.8125rem;
            color: #6c727e;
            position: relative;
        }
        .off::before {
            display: inline-block;
            position: absolute;
            content: "^";
            top: 0.125rem;
            left: -0.75rem;
        }
    }
    .box {
        overflow: hidden;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        .item:nth-child(3n + 3) {
            margin-right: 0;
        }
        .item {
            margin-top: 0.625rem;
            box-sizing: border-box;
            width: 6.875rem;
            height: 11.5625rem;
            margin-right: 0.4375rem;
            .img {
                width: 6.875rem;
                height: 8.75rem;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .state {
                display: flex;
                flex-direction: column;
                height: 2.8125rem;
                width: 6.875rem;
                justify-content: space-evenly;
                .name {
                    font-size: 0.0081rem;
                    width: 100%;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    height: 0.75rem;
                }
                .bookstate {
                    font-size: 0.8125rem;
                    color: #8b8b8b;
                }
            }
        }
    }
}
</style>
